<template>
    <h-section title="基本信息" :collapse="!!detail.id">
        <div>
            <a-form layout="inline" :model="form">
                <a-row :gutter="24">
                    <a-col :span="10">
                        <a-form-item label="系统名称" name="systemName">
                            {{ form.systemName }}
                        </a-form-item>
                    </a-col>
                    <a-col :span="10">
                        <a-form-item label="状态">
                            <a-badge status="success" :text="$filters.systemStatusFilter(form.status)" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="10">
                        <a-form-item label="系统类型" name="systemType">
                            {{ $filters.valToNameFilter('systemType', form.systemType) }}
                        </a-form-item>
                    </a-col>
                    <a-col :span="10">
                        <a-form-item label="当前版本"> {{ form.versionNumber }} </a-form-item>
                    </a-col>
                    <a-col :span="10">
                        <a-form-item label="系统标识">
                            {{ form.systemTag }}
                        </a-form-item>
                    </a-col>
                    <a-col :span="10">
                        <a-form-item label="是否外部">
                            {{ form.isOutsideSystem ? '是' : '否' }}
                        </a-form-item>
                    </a-col>
                    <a-col :span="10">
                        <a-form-item label="所属项目" name="belongProject">
                            <div>
                                <div>
                                    <h-search-select-cell :default-value="form.relateProjectName ? `${form.relateProjectNumber}-${form.relateProjectName}` : ''" type="belong" label="xmmc" @success="handleSelectChange($event, 'belong')">
                                        <template #label="{ record }"> {{ record.bh }}—{{ record.xmmc }} </template>
                                    </h-search-select-cell>
                                </div>
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="10">
                        <a-form-item label="标签" v-if="detail.id">
                            {{ detail.tag }}
                        </a-form-item>
                    </a-col>
                    <a-col :span="10">
                        <a-form-item label="开始时间" name="startTime">
                            <div style="width: 100%">
                                {{ form.startTime ? $moment(form.startTime).format('YYYY-MM-DD') : '' }}
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="10">
                        <a-form-item label="结束时间">
                            {{ form.endTime ? $moment(form.endTime).format('YYYY-MM-DD') : '' }}
                        </a-form-item>
                    </a-col>
                    <a-col :span="10">
                        <a-form-item label="产品类型">
                            {{ $filters.systemProductTypeFilter(form.productType) }}
                        </a-form-item>
                    </a-col>
                    <a-col :span="10">
                        <a-form-item label="产品目录类型">
                            {{ $filters.catalogTypeFilter(form.catalogType) }}
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="服务部门（业务方)" name="businessSide">
                            {{ form.businessSide }}
                        </a-form-item>
                    </a-col>

                    <a-col :span="24">
                        <a-form-item label="产品简介" name="systemIntroduce">
                            {{ form.systemIntroduce }}
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
            <flexbox justify="flex-end" class="btn-group">
                <a-button @click="handleCancel">取消</a-button>
                <a-button type="primary" @click="handleSubmit">保存</a-button>
            </flexbox>
        </div>
    </h-section>
</template>

<script lang="ts">
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import api from '@/api';
import { HSearchSelectCell } from '@/components';
import { defineComponent, ref, unref, watch } from 'vue';
export default defineComponent({
    name: 'CreateProduct',
    components: {
        HSearchSelectCell
    },
    props: {
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const router = useRouter();
        const form = ref<any>({
            id: null,
            versionNumber: '',
            systemName: '', //系统名称
            belongProject: '', //所属项目
            systemTag: '', // 系统标识
            status: '进行中', //状态
            startTime: '', //开始日期
            endTime: '', //结束日期
            systemType: '', //系统类型
            isOutsideSystem: false, // 是否外部
            businessSide: '', // 业务方
            systemIntroduce: '', //产品简介
            relateProjectNumber: '', // 项目编号
            relateProjectName: '', // 项目名称
            catalogType: '', //产品目录类型
            productType: ''
        });
        const resetForm = () => {
            form.value = {
                id: null,
                versionNumber: '', //版本
                systemName: '', //系统名称
                belongProject: '', //所属项目
                systemTag: '', // 系统标识
                status: '进行中', //状态
                startTime: '', //开始日期
                endTime: '', //结束日期
                systemType: '', //系统类型
                isOutsideSystem: false, // 是否内部
                businessSide: '', // 业务方
                systemIntroduce: '', //产品简介
                relateProjectNumber: '', // 项目编号
                relateProjectName: '', // 项目名称
                catalogType: '', //产品目录类型
                productType: ''
            };
        };
        const handleCancel = () => {
            router.go(-1); // 返回上一个界面
        };
        const handleSubmit = () => {
            handleSave();
        };
        const handleSave = async () => {
            const query = {
                ...unref(form),
                isOutsideSystem: unref(form).isOutsideSystem ? '1' : '0'
            };
            const { success, errorMsg } = await api.productDetailModel.save(query);
            if (success) {
                message.success('操作成功');
                router.push({
                    path: '/setting/system/systemList'
                });
            } else {
                message.error(errorMsg);
            }
        };
        // 通用选择回调
        const handleSelectChange = (val: any, type: string) => {
            switch (type) {
                case 'belong':
                    form.value.relateProjectNumber = val.bh;
                    form.value.relateProjectName = val.xmmc;
                    break;
            }
        };
        const init = () => {
            resetForm();
            if (props.detail.id) {
                Object.keys(unref(form)).forEach((key) => {
                    form.value[key] = props.detail[key];
                    if (key === 'isOutsideSystem') {
                        form.value.isOutsideSystem = props.detail.isOutsideSystem === '1';
                    }
                });
            }
        };
        watch(
            () => props.detail,
            (n) => {
                init();
            },
            {
                immediate: true,
                deep: true
            }
        );
        return {
            form,
            handleCancel,
            handleSubmit,
            handleSelectChange
        };
    }
});
</script>
<style lang="less">
.page-wrap-ql {
    .ql-snow .ql-picker {
        line-height: 20px !important;
    }
}
</style>
<style scoped lang="less">
.page-wrap {
    height: 100%;
    position: relative;
    .page-cont {
        background: #fff;
        .btn-group {
            margin: 24px 0;
            button + button {
                margin-left: 8px;
            }
        }
    }
}
</style>